<template>
  <div style="display: flex; justify-content: center; ">
    <el-form-item label="患者编号" >
      <el-input v-model="queryParams.patId" placeholder="请输入患者编号" clearable @input="searchBookInfo" />
    </el-form-item>
  </div>

  <div style="display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px">
    <div v-for="(_appointment, index) in appointmentVOList" :key="index">
      <CheckItemPanel  :appointment="_appointment"  @event_appoint_confirm="onEventAppointConfirm"/>
    </div>
  </div>

  <el-divider/>

  <el-form
    ref="formRef"
    :model="formData"
    label-width="100px"
    class="two-column-form"
  >
    <div class="form-row">
      <el-form-item label="患者姓名" prop="patName">
        <el-input v-model="formData.patName" placeholder="患者姓名" readonly />
      </el-form-item>
      <el-form-item label="患者性别" prop="patGender">
        <el-radio-group v-model="formData.patGender" readonly>
          <el-radio
              v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
              :key="dict.value"
              :value="dict.value">
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="患者生日" prop="patBirthday">
        <el-date-picker
            v-model="formData.patBirthday"
            type="date"
            value-format="x"
            placeholder="选择患者生日"
            readonly
        />
      </el-form-item>
    </div>
    <div class="form-row">
      <el-form-item label="患者手机" prop="patMobile" >
        <el-input v-model="formData.patMobile" placeholder="请输入患者手机" readonly />
      </el-form-item>
<!--
      <el-form-item label="患者电话" prop="patPhone" readonly>
        <el-input v-model="formData.patPhone" placeholder="请输入患者电话" />
      </el-form-item>
-->
      <el-form-item label="身份证号" prop="patIdentityId" >
        <el-input v-model="formData.patIdentityId" placeholder="请输入身份证号" readonly />
      </el-form-item>
    </div>
    <div class="form-row">
<!--
      <el-form-item label="病区代码" prop="patWardCode" readonly>
        <el-input v-model="formData.patWardCode" placeholder="请输入病区代码" />
      </el-form-item>
-->
      <el-form-item label="病区名称" prop="patWardDesc" >
        <el-input v-model="formData.patWardDesc" placeholder="请输入病区名称" readonly />
      </el-form-item>
      <el-form-item label="床号" prop="patBedNo" >
        <el-input v-model="formData.patBedNo" placeholder="请输入床号" readonly />
      </el-form-item>
    </div>
    <div class="form-row">
      <!--
            <el-form-item label="科室代码" prop="patDeptCode" readonly>
              <el-input v-model="formData.patDeptCode" placeholder="请输入科室代码" />
            </el-form-item>
      -->
      <el-form-item label="科室名称" prop="patDeptDesc" >
        <el-input v-model="formData.patDeptDesc" placeholder="请输入科室名称" readonly/>
      </el-form-item>
      <el-form-item label="患者地址" prop="patAddr">
        <el-input v-model="formData.patAddr" placeholder="请输入患者地址" readonly/>
      </el-form-item>
    </div>
  </el-form>
</template>
<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import { AppointmentApi, AppointmentVO } from '@/api/ecg/appointment'
import {useCheckTypeStore} from "@/store/modules/checkType";
import CheckItemPanel from "@/views/ecg/appointment/CheckItemPanel.vue";

/** 预约确认 表单 */
defineOptions({ name: 'AppointmentConfirm' })

const checkTypeStore = useCheckTypeStore();

const queryParams = reactive({
    patId: ''
})

const appointmentVOList = ref<AppointmentVO[]>([])

const formData = ref<AppointmentVO>({
  id: 0,
  applyNo: "",
  patSrc: 0,
  patId: "",
  patName: "",
  patGender: 1, // 1 男 2 女
  patBirthday: new Date(),
  patMobile: "",
  patPhone: "",
  patIdentityId: "",
  patAddr: "",
  patDeptCode: "",
  patDeptDesc: "",
  patWardCode: "",
  patWardDesc: "",
  patBedNo: "",
  bookId: "",
  bookTime: new Date(),
  bookDate: new Date(),
  bookTimeslot: 9301030,
  bookCheckType: checkTypeStore.getCheckTypeName(100),
  paid: 0,
})
const formRef = ref() // 表单 Ref

const searchBookInfo = async () => {
  resetForm()

  if (null === queryParams.patId || "" === queryParams.patId.trim())
    return

  const _patId = queryParams.patId.trim()
  console.warn("===" + _patId + "===")

  const data = await AppointmentApi.queryAndCreateAppointmentByPatId(_patId) // 对应数据库中 pat_id
  console.info( data )
  if (null !== data && data.length > 0) {
    formData.value = data[0]
    appointmentVOList.value = data
    console.info( formData.value )
    return
  }

  ElNotification({
    title: '温馨提示',
    message: "请先预约",
    type: 'warning'
  })
}

/** 重置表单 */
const resetForm = () => {
  appointmentVOList.value.length=0;
  formData.value = {
    id: 0,
    applyNo: "",
    patSrc: 0,
    patId: "",
    patName: "",
    patGender: 1, // 1 男 2 女
    patBirthday: new Date(),
    patMobile: "",
    patPhone: "",
    patIdentityId: "",
    patAddr: "",
    patDeptCode: "",
    patDeptDesc: "",
    patWardCode: "",
    patWardDesc: "",
    patBedNo: "",
    bookId: "",
    bookTime: new Date(),
    bookDate: new Date(),
    bookTimeslot: 9301030,
    bookCheckType: checkTypeStore.getCheckTypeName(100),
    paid: 0,
    bookSeqNum: 0
  }
  formRef.value?.resetFields()
}

const onEventAppointConfirm = () => {
/*
  if (null !== appointmentVOList.value && appointmentVOList.value.length === 1) {
    queryParams.patId = ""
  }
*/
  queryParams.patId = ""
}

/** 初始化 **/
onMounted(() => {
  resetForm()
})


</script>

<style lang="scss" scoped>
.two-column-form .form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.two-column-form .form-row .el-form-item {
  width: 48%;
}

.el-form-item {
  margin-bottom: 5px;
}

</style>
